<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ登录</title>
    <!-- 引入网页图标 -->
    <link rel="shortcut icon" href="images/20201127092629_f7kg4fnVIB.ico" type="image/x-icon">
    <!-- 引入本项目样式 -->
    <link rel="stylesheet" href="css/qq-login.css">
</head>
<body>
<div class="wrap">
    <div class="QQ-login">
        <div class="tabs">
            <h3>密码登录</h3>
            <br>
            <p>推荐使用<a href="#">快捷登录</a>，防止盗号</p>
        </div>
        <form action="" method="post">
            <div class="item">
                <input v-model="uname" name="qqid" type="text" placeholder="支持QQ号/邮箱/手机号登录" autofocus>
            </div>
            <div class="item">
                <input v-model="upwd" name="pwd" type="password" placeholder="请输入密码">
            </div>
            <div class="item" @click="login">
                <input type="button" value="登录">
            </div>
        </form>
        <div class="other">
            <a href="#"><span>找回密码</span></a><i>|</i>
            <a href="#"><span>注册账号</span></a><i>|</i>
            <a href="#"><span>反馈意见</span></a>
        </div>
    </div>
</div>
</body>
<!--引入 vue.js 文件-->
<script src="./js/vue.2.7.14.js"></script>
<!--引入 axios.js 文件-->
<script src="./js/axios.min.js"></script>

<!--道理：js 很多框架-->

<script>
    console.log(Vue);
    Vue.config.productionTip = false;
    // 实现登录，TODO 技术选型
    // jquery vs vue
    // 第一步：创建一个 vue 对象（就是刚刚哪个图，绿色的方块，ViewModel）
    const vm = new Vue({
        // 把整个 div 当作view，交给vue进行管理
        el: '.wrap',
        data:{
            uname: '54789625',
            upwd: '123456'
        },
        methods : {
            login(){
                console.log('login按钮执行了')
                // 获取用户名
                // this.uname 为什么可以这样写
                // 简单校验、非空(不方便)
                // 在js里面，‘’ “”就是flase
                // 0 代表flase，1 代表true
                if(!this.uname || !this.upwd){
                    alert('账号密码不能为空！！')
                    return
                }
                // 没问题就开始发请求到后端去
                // 技术选型：用 jquery 还是 axios（用它）
                // 细节 /login 是因为我们在同一个域里面。在同一个项目里面

                // 假设现在有另一个系统要来访问我们的
                axios.post('/login',{
                    uname: this.uname,
                    upwd: this.upwd
                }).then(res => {
                    console.log(res);
                    if(res.data.msg === 200){
                        // v1.0
                        // window.location.href = "/home"

                        // v2.0 不是非常推荐，绕过了mvc中的c，绕过了权限认证
                        window.location.href = "/list4vue.html"
                    }
                })
            }
        }
    })
    console.log(vm);
</script>
</html>